<template>
    <view style="height: 100%">
        <!-- pages/component/imagePrevLoad/imagePrevLoad.wxml -->

        <image v-if="loadedClone == 'true'" class="fade_in" :src="src" :mode="mode" @load="loadCompleteFun" :style="imageStyle" :data-index="index"></image>
        <image v-if="loadedClone != 'true'" class="fade_in" :src="prevImage" :mode="mode" :style="imageStyle"></image>
    </view>
</template>

<script>
// pages/component/imagePrevLoad/imagePrevLoad.js
export default {
    data() {
        return {
            loadedClone: ''
        };
    },
    /**
     * 组件的属性列表
     */
    props: {
        //占位图片
        prevImage: {
            type: String,
            default: ''
        },
        //图片的地址，必须
        src: {
            type: String,
            default: ''
        },
        mode: {
            type: String,
            default: 'widthFix'
        },
        imageStyle: {
            type: String,
            default: ''
        },
        loaded: {
            type: String,
            default: 'false' //"true" 非true
        },

        index: {
            type: Number,
            default: 0
        }
    },
    mounted() {
        // 处理小程序 attached 生命周期
        this.attached();
    },
    /**
     * 组件的方法列表
     */
    methods: {
        attached: function () {},

        loadCompleteFun: function (e) {
            this.setData({
                loadedClone: 'true'
            });
            this.$emit('bindload', {
                detail: e
            });
        }
    },
    created: function () {}
};
</script>
<style>
/* pages/component/imagePrevLoad/imagePrevLoad.wxss */
@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

.fade_in {
    animation: fadeIn 1s ease;
    width: 100%;
    height: 100%;
    border-radius: 8rpx;
    background: #f5f5f5;
}
</style>
